<%--
  Created by IntelliJ IDEA.
  User: 王韫琛
  Date: 2021/1/13
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>住户信息维护</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/css/layui.css">
</head>
<body>
<%--更新开始--%>
<div style="text-align: center;display: none" id="form_body">
    <br>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>住户信息添加</legend>
    </fieldset>
    <br>
    <div class="layui-inline">
        <form action="${pageContext.request.contextPath}/register" class="layui-form layui-form-pane" lay-filter="dataFrm" method="post">
            <div class="layui-form-item">
                <input type="hidden" name="id">
                <label class="layui-form-label" for="name">姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" class="layui-input" required lay-verify="required"
                           lay-reqText="请输入用户姓名" placeholder="请输入用户名" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="gender">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="gender" id="gender" value="男" title="男" checked="checked">
                    <input type="radio" name="gender" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="age">年龄:</label>
                <div class="layui-input-inline">
                    <input type="text" name="age" id="age" class="layui-input" required lay-verify="required|number"
                           lay-reqText="请输入年龄"
                           placeholder="请输入年龄" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="phone">手机号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" id="phone" class="layui-input" required lay-verify="required|phone"
                           lay-reqText="请输入正确的手机号" placeholder="请输入手机号" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="identity_card">身份证号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="identity_card" id="identity_card" class="layui-input" required
                           lay-verify="required|identity"
                           lay-reqText="身份证号" placeholder="身份证号" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="census">籍贯:</label>
                <div class="layui-input-inline">
                    <input type="text" name="census" id="census" class="layui-input" required lay-verify="required"
                           lay-reqText="请输入籍贯" placeholder="请输入籍贯" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="nat">核酸证明:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="nat" id="nat" value="有" title="有" checked="checked">
                    <input type="radio" name="nat" value="无" title="无">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="bus_type">交通工具:</label>
                <div class="layui-input-inline">
                    <input type="text" name="bus_type" id="bus_type" class="layui-input" required lay-verify="required"
                           lay-reqText="请输入交通工具" placeholder="请输入交通工具" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="ticket">班次</label>
                <div class="layui-input-inline">
                    <input type="text" name="ticket" id="ticket" class="layui-input" required lay-verify="required"
                           lay-reqText="请输入班次" placeholder="请输入班次" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="interchange">中转站:</label>
                <div class="layui-input-inline">
                    <input type="text" name="interchange" id="interchange" class="layui-input" required
                           lay-verify="required"
                           lay-reqText="请输入中转站" placeholder="请输入中转站" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="sum_family">家庭人数:</label>
                <div class="layui-input-inline">
                    <input type="text" name="sum_family" id="sum_family" class="layui-input" required
                           lay-verify="required|number"
                           lay-reqText="请输入家庭总人数" placeholder="请输入家庭总人数" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="test1">添加时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="addtime" required lay-verify="required|data" class="layui-input"
                           id="test1">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label" for="remark">备注:</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="remark" name="remark" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="padding-left: 45px">
                    <button class="layui-btn" lay-submit lay-filter="doSubmit" lay-event="add">注册</button>
                    <button type="reset" class="layui-btn layui-btn-warm">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>
<%--更新结束--%>
<br>
<%--搜索表单开始--%>
<form class="layui-form layui-form-pane" method="post">
    &nbsp;&nbsp;输入身份证搜索：
    <div class="layui-inline">
        <input class="layui-input" name="identity_card" lay-verify="required|identity">
    </div>
    <button class="layui-btn" lay-submit lay-filter="doSearch">搜索</button>
</form>
<%--搜索表单结束--%>
<%--表格渲染开始--%>
<table class="layui-hide" id="test" lay-filter="test"></table>
<%--表格渲染结束--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/javascript" src="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['form', 'jquery', 'table', 'laydate', 'layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //日期控件
        laydate.render({
            elem: '#test1' //指定元素
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });
        //表单渲染开始
        var tableIns = table.render({
            elem: '#test'
            , height: 524
            , url: '/findPage'
            , page: true //开启分页
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}
                , {field: 'name', title: '用户名', edit: 'text'}
                , {field: 'gender', title: '性别', align: "center"}
                , {field: 'age', title: '年龄', align: "center"}
                , {field: 'phone', title: '手机号', align: "center"}
                , {field: 'identity_card', title: '身份证', align: "center"}
                , {field: 'census', title: '籍贯', align: "center"}
                , {field: 'nat', title: '核酸证明', align: "center"}
                , {field: 'bus_type', title: '交通工具', align: "center"}
                , {field: 'ticket', title: '班次', align: "center"}
                , {field: 'interchange', title: '中转站', align: "center"}
                , {field: 'addtime', title: '添加时间', sort: true, align: "center"}
                , {field: 'remark', title: '备注', align: "center"}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: "center"}
            ]]
            , request: {
                pageName: 'pageNum' // 页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , id: 'testReload'
        });
        //表单渲染结束

        //头工具栏事件开始
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });
        //头工具栏事件结束

        //监听行工具事件开始
        table.on('tool(test)', function (obj) {
            switch (obj.event) {
                //编辑
                case 'edit':
                    openUpdateWindow(obj.data);
                    break;
                //删除
                case 'del':
                    deleteById(obj.data);
                    break;
            }
        });
        //监听行工具事件结束

        var mainIndex;//窗口索引
        var url;//提交地址
        //更新用户信息开始
        function openUpdateWindow(data) {
            console.log(data)
            mainIndex = layer.open({
                type: 1,//弹出层类型
                title: "修改住户信息",
                area: ['600px', '600px'],
                content: $("#form_body"),//引用的窗口代码

                success: function () {
                    //表单数据回显
                    form.val("dataFrm", data);
                    //修改请求
                    url = "/updateHouseInfo";
                }
            });
        }
        //更新用户信息结束
        //删除用户开始
        function deleteById(data) {
            //提示用户确认是否删除
            layer.confirm("确定要删除么", {icon: 3, title: "提示"}, function (index) {
                //发送ajax请求
                $.post("/deleteHouseInfoById", {"id": data.id}, function (result) {
                    if (result.success) {
                        layer.alert(result.message, {icon: 1});
                        //刷新数据表格
                        tableIns.reload();
                    } else {
                        layer.alert(result.message, {icon: 2});
                    }
                }, "json");
                //关闭提示框
                layer.close(index);
            });
        }
        //删除用户信息结束

        //监听表单提交事件开始
        form.on("submit(doSubmit)", function (data) {
            $.post(url, data.field, function (result) {
                if (result.success) {
                    layer.alert(result.message, {icon: 1});
                    //关闭窗口
                    layer.close(mainIndex);
                    //刷新数据表格
                    tableIns.reload();
                } else {
                    layer.alert(result.message, {icon: 2});
                }
            }, "json");
            return false;
        });
        //监听表单提交事件结束

        //监听搜索按钮得提交开始
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                url: '/selectIdentitycard',
                where: data.field,//查询条件
                page: {
                    curr: 1
                }
            })
            //禁止页面刷新
            return false;
        })
        //监听搜索按钮结束
    });
</script>

</body>
</html>